<template>
  <div class="sdy-order">
    <SdyHeader title="啥都有 订单页面" back></SdyHeader>
    订单页面
    <van-form @submit="submitHandler">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="姓名"
          label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="phone"
          type="phone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <van-field
          v-model="city"
          is-link
          readonly
          name="area"
          label="地址"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
          <van-field
          v-model="address"
          name="详细地址"
          label="详细地址"
          placeholder="详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        />
        <van-popup v-model:show="showArea" position="bottom">
          <van-area title="标题" :area-list="areaList"
           @cancel='showArea = false'
           @confirm='onConfirm' />
        </van-popup>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
//获取订单信息
import {orderInfoApi} from '@/api/order'
import{onMounted} from 'vue'
//导入城市信息
import {areaList} from '@vant/area-data'
import {updateAddressInfoApi} from '@/api/order'
// --------订单确认------------
//获取到信息
// const user_id = window.localStorage.getItem('user_id') as string
// //发送请求获取订单确认信息
// const getOrderInfo = async()=>{
//   const res = await orderInfoApi(user_id)
//   console.log(res)
// }

// onMounted(()=>{
//   getOrderInfo()
// })
// --------------------
//准备表单需要的数据
import {ref } from 'vue'

const username = ref<string>('')
const phone = ref<string>('')
const address = ref<string>('')
const showArea = ref<boolean>(false)
const cityList = []
const city = ref<string>('')

const submitHandler = async ()=>{
  //准备信息
  const info ={
    userid: window.localStorage.getItem('user_id'),
    name: username.value,
    tel: phone.value,
    province:city.value.split('/')[0],
    city:city.value.split('/')[1],
    addressDetail: address.value,
    time:window.localStorage.getItem('time')
  }
  const res  =await updateAddressInfoApi(info)
  console.log(res)
}
const onConfirm =(info: any)=>{
  console.log('确认选择',info)
  // 吧选择到的内容组成完整的字符串
  const str = info.reduce((prev:any,item:any)=>{
    return prev + '/' + item.name
  },'').slice(1)
  // 吧补充好的内容放到city信息内
  city.value = str
  showArea.value = false
} 
 //采集订单所需的信息

 //采集完成 填充到指定位置

//  确认订单信息

// 查看所有订单

</script>

<style scoped lang="scss">

</style>
